<template>
    <div class="model-selector">
        <select class="selector-dropdown" v-model="selectedModel" @change="handleChange">
            <option value="" disabled>{{ placeholder }}</option>
            <option v-for="model in models" :key="model.id" :value="model.id">
                {{ model.data.label }}
            </option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import { getobjm, getOrCreateSceneObj } from '../scripts/getobjm'
import { ESObjectsManager, ES3DTileset, ESTerrainLayer } from 'earthsdk3';

const objm = getobjm();

const props = defineProps({
    placeholder: {
        type: String,
        default: '-- 选择模型 --'
    },
    modelsFile: {
        type: String,
        default: 'http://localhost:8080/BimModels.json'
    },
    modelValue: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['model-change']);

const selectedModel = ref(props.modelValue)

const models = ref<Array<any>>([]); // Initialize as empty array

// Load models from JSON file
onBeforeMount(async () => {
    try {
        const response = await fetch(props.modelsFile);
        if (!response.ok) {
            throw new Error('Failed to load models data');
        }
        models.value = await response.json();
    } catch (error) {
        console.error('Error loading models:', error);
        // You could set a default value here if needed
        models.value = [];
    }
});


const handleChange = (event) => {
    selectedModel.value = event.target.value;
    //  console.log('selected model ', selectedModel.value)
    swithModel(selectedModel.value)
};


function swithModel(id: string) {
    const es3DTileset = getOrCreateSceneObj(objm, ES3DTileset, "bim-model1")
    console.log('3d tileset layer ', es3DTileset)
    //resetTileset(objm, es3DTileset)

    const scene = models.value.find(item => item.id === id)?.data;

    emit('model-change', scene);

    const url = scene.url
    const location = scene.location
    const rotation = scene.rotation
    const delay = scene.delay
    const terrainUrl = scene.terrainUrl
    es3DTileset.url = url
    if (location) {
        es3DTileset.tilesetReady.don(() => {
            const terrainLayer = getOrCreateSceneObj(objm, ESTerrainLayer, 'terrainLayer1')
            if (terrainLayer) {
                terrainLayer.url = terrainUrl
            }
            objm.activeViewer.flyIn(location, rotation, delay)
        })
    }
}

// function flyIn() {
//     const lon = 106.78225'
//     const lat = 31.88731
//     const height = 633.98
//     const yaw = 84.65
//     const pitch = -16.88
//     const roll = 360
//     objm.activeViewer.flyIn([106.78225, 31.88731, 633.98], [84.65, -16.88, 360], 3)
// }
</script>

<style scoped>
.model-selector {
    width: 50px;
    background-color: #153651;
    position: absolute;
    right: 600px;
    top: 70px;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.selector-title {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.selector-dropdown {
    color: #f7f9fa;
    padding: 8px 15px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #153651;
    cursor: pointer;
    min-width: 150px;
}

.selector-dropdown:hover {
    background-color: #153651;
}

.selector-dropdown:focus {
    outline: none;
    border-color: #4CAF50;
}
</style>
